<div class="mainPage">

  <div *ngIf="bannerList.length>0">
    <nz-carousel *ngIf="bannerList.length>0" style="padding: 2px 10px;" nzAutoPlay>
      <div nz-carousel-content *ngFor="let banner of bannerList">
        <a (click)="toLinkAddress(banner)"><img class = "topImg" src="{{config.IP+config.API.getUpload+banner.url}}"/></a>
      </div>
    </nz-carousel>
  </div>

  <div *ngIf="bannerList.length==0">
    <nz-carousel  style="padding: 2px 10px;" nzAutoPlay>
      <div nz-carousel-content *ngFor="let banner of banners">
        <a><img class = "topImg" src="{{banner.url}}"/></a>
      </div>
    </nz-carousel>
  </div>


  <div *ngIf="showUsedCount">
    <div class="gutter-example">
      <div nz-row [nzGutter]="8">
        <div nz-col class="gutter-row" [nzSpan]="24">
          <nz-card style="width:100%;min-height:100px;">
            <ng-template #title>
              <i class="anticon anticon-dot-chart infoI"></i>本单位年度信息概况
            </ng-template>
            <ng-template #body>
              <h3 class="usedCount">
                <i class="anticon anticon-hdd infoI"></i>电梯总数：{{elevatorCount}}</h3>
              <h3 class="usedCount">
                <i class="anticon anticon-solution infoI"></i>维保总次数：{{maintNum}}</h3>
              <h3 class="usedCount">
                <i class="anticon anticon-team infoI"></i>应急救援总次数：{{emergencyRescueCount}}</h3>
              <h3 class="usedCount">
                <i class="anticon anticon-setting infoI"></i>维修总次数：{{repairInfoCount}}</h3>
              <h3 class="usedCount">
                <i class="anticon anticon-video-camera infoI"></i>救援演练总次数：{{resoueDrilCount}}</h3>
              <h3 class="usedCount">
                <i class="anticon anticon-dislike-o infoI"></i>乘客投诉总次数：{{appraisalCount}}</h3>
            </ng-template>
          </nz-card>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="showMaintCount">
    <div class="gutter-example">
      <div nz-row [nzGutter]="8">
        <div nz-col class="gutter-row" [nzSpan]="24">
          <nz-tabset style="margin-top:4px;" [nzTabPosition]="'top'" [nzType]="'card'">
            <nz-tab>
              <ng-template #nzTabHeading>
                <i class="anticon anticon-dot-chart infoI"></i>本单位年度信息概况
              </ng-template>
              <div style="width:98%;padding:15px 0;background:#fff;margin:0 1%;">
                <h3 class="usedCount">
                  <i class="anticon anticon-hdd infoI"></i>维保电梯总数：{{elevatorCount}}</h3>
                <h3 class="usedCount">
                  <i class="anticon anticon-calculator infoI"></i>维保总次数：{{maintNum}}</h3>
                <h3 class="usedCount">
                  <i class="anticon anticon-setting infoI"></i>维修总次数：{{repairInfoCount}}</h3>
              </div>
            </nz-tab>
            <nz-tab>
              <ng-template #nzTabHeading>
                <i class="anticon anticon-select infoI"></i>今日维保概况
              </ng-template>
              <div style="width:98%;;margin:0 1%;">
                <div nz-row [nzGutter]="8">
                  <div nz-col class="gutter-row" [nzSpan]="24">
                    <nz-card class="maintToday" style="width:100%;min-height:250px;">
                      <ng-template #title>
                        <i class="anticon anticon-calculator infoI"></i>半月保
                      </ng-template>
                      <ng-template #body>
                        <nz-table #nzTable [nzBordered]='true' [nzIsPagination]='false' [nzDataSource]="halfMonData" [nzPageSize]="100" [nzScroll]="{ y: 200 }">

                            <thead nz-thead>
                              <tr>
                                <th nz-th>
                                  <span>使用单位名称</span>
                                </th>
                                <th nz-th>
                                  <span>设备注册代码</span>
                                </th>
                                <th nz-th>
                                  <span>设备地址</span>
                                </th>
                                <th nz-th>
                                  <span>设备类型</span>
                                </th>
                                <th nz-th>
                                  <span>维保人员</span>
                                </th>
                                <th nz-th>
                                  <span>维保开始时间</span>
                                </th>
                                <th nz-th>
                                  <span>维保结束时间</span>
                                </th>
                                <th nz-th>
                                  <span>导出</span>
                                </th>
                              </tr>
                            </thead>
                          <tbody nz-tbody>
                            <tr nz-tbody-tr *ngFor="let data of halfMonData">
                              <td nz-td>{{data.partyName}}</td>
                              <td nz-td>{{data.elevatorNum}}</td>
                              <td nz-td>{{data.elevatorAddr}}</td>
                              <td nz-td>{{data.elevatorType}}</td>
                              <td nz-td>{{data.maintenanceUserName}}</td>
                              <td nz-td>{{(data.maintenanceStartDate | timeTrans)}}</td>
                              <td nz-td>{{(data.maintenanceEndDate | timeTrans )}}</td>
                              <td nz-td>
                                <span>
                                  <button nz-button [nzSize]="'small'" [nzType]="'primary'" (click)="export(data)">导出</button>
                                </span>
                              </td>
                            </tr>
                          </tbody>
                        </nz-table>
                      </ng-template>
                    </nz-card>
                  </div>
                  <div nz-col class="gutter-row" [nzSpan]="24">
                    <nz-card class="maintToday" style="width:100%;min-height:250px;">
                      <ng-template #title>
                        <i class="anticon anticon-calculator infoI"></i>季度保
                      </ng-template>
                      <ng-template #body>
                        <nz-table #nzTable [nzBordered]='true' [nzIsPagination]='false' [nzDataSource]="quarterData" [nzPageSize]="100" [nzScroll]="{ y: 200 }">

                            <thead nz-thead>
                              <tr>
                                <th nz-th>
                                  <span>使用单位名称</span>
                                </th>
                                <th nz-th>
                                  <span>设备注册代码</span>
                                </th>
                                <th nz-th>
                                  <span>设备地址</span>
                                </th>
                                <th nz-th>
                                  <span>设备类型</span>
                                </th>
                                <th nz-th>
                                  <span>维保人员</span>
                                </th>
                                <th nz-th>
                                  <span>维保开始时间</span>
                                </th>
                                <th nz-th>
                                  <span>维保结束时间</span>
                                </th>
                                <th nz-th>
                                  <span>导出</span>
                                </th>
                              </tr>
                            </thead>
                          <tbody nz-tbody>
                            <tr nz-tbody-tr *ngFor="let data of quarterData">
                              <td nz-td>{{data.partyName}}</td>
                              <td nz-td>{{data.elevatorNum}}</td>
                              <td nz-td>{{data.elevatorAddr}}</td>
                              <td nz-td>{{data.elevatorType}}</td>
                              <td nz-td>{{data.maintenanceUserName}}</td>
                              <td nz-td>{{data.maintenanceStartDate | timeTrans}}</td>
                              <td nz-td>{{data.maintenanceEndDate | timeTrans}}</td>
                              <td nz-td>
                                <span>
                                  <button nz-button [nzSize]="'small'" [nzType]="'primary'" (click)="export(data)">导出</button>
                                </span>
                              </td>
                            </tr>
                          </tbody>
                        </nz-table>
                      </ng-template>
                    </nz-card>
                  </div>
                </div>
                <div nz-row [nzGutter]="8">
                  <div nz-col class="gutter-row" [nzSpan]="24">
                    <nz-card class="maintToday" style="width:100%;min-height:250px;">
                      <ng-template #title>
                        <i class="anticon anticon-calculator infoI"></i>半年保
                      </ng-template>
                      <ng-template #body>
                        <nz-table #nzTable [nzBordered]='true' [nzIsPagination]='false' [nzDataSource]="halfYearData" [nzPageSize]="100" [nzScroll]="{ y: 200 }">

                            <thead nz-thead>
                              <tr>
                                <th nz-th>
                                  <span>使用单位名称</span>
                                </th>
                                <th nz-th>
                                  <span>设备注册代码</span>
                                </th>
                                <th nz-th>
                                  <span>设备地址</span>
                                </th>
                                <th nz-th>
                                  <span>设备类型</span>
                                </th>
                                <th nz-th>
                                  <span>维保人员</span>
                                </th>
                                <th nz-th>
                                  <span>维保开始时间</span>
                                </th>
                                <th nz-th>
                                  <span>维保结束时间</span>
                                </th>
                                <th nz-th>
                                  <span>导出</span>
                                </th>
                              </tr>
                            </thead>
                          <tbody nz-tbody>
                            <tr nz-tbody-tr *ngFor="let data of halfYearData">
                              <td nz-td>{{data.partyName}}</td>
                              <td nz-td>{{data.elevatorNum}}</td>
                              <td nz-td>{{data.elevatorAddr}}</td>
                              <td nz-td>{{data.elevatorType}}</td>
                              <td nz-td>{{data.maintenanceUserName}}</td>
                              <td nz-td>{{data.maintenanceStartDate | timeTrans}}</td>
                              <td nz-td>{{data.maintenanceEndDate | timeTrans}}</td>
                              <td nz-td>
                                <span>
                                  <button nz-button [nzSize]="'small'" [nzType]="'primary'" (click)="export(data)">导出</button>
                                </span>
                              </td>
                            </tr>
                          </tbody>
                        </nz-table>
                      </ng-template>
                    </nz-card>
                  </div>
                  <div nz-col class="gutter-row" [nzSpan]="24">
                    <nz-card class="maintToday" style="width:100%;min-height:250px;">
                      <ng-template #title>
                       <i class="anticon anticon-calculator infoI"></i>年保
                      </ng-template>
                      <ng-template #body>
                        <nz-table #nzTable [nzBordered]='true' [nzIsPagination]='false' [nzDataSource]="yearData" [nzPageSize]="100" [nzScroll]="{ y: 200 }">

                            <thead nz-thead>
                              <tr>
                                <th nz-th>
                                  <span>使用单位名称</span>
                                </th>
                                <th nz-th>
                                  <span>设备注册代码</span>
                                </th>
                                <th nz-th>
                                  <span>设备地址</span>
                                </th>
                                <th nz-th>
                                  <span>设备类型</span>
                                </th>
                                <th nz-th>
                                  <span>维保人员</span>
                                </th>
                                <th nz-th>
                                  <span>维保开始时间</span>
                                </th>
                                <th nz-th>
                                  <span>维保结束时间</span>
                                </th>
                                <th nz-th>
                                  <span>导出</span>
                                </th>
                              </tr>
                            </thead>
                          <tbody nz-tbody>
                            <tr nz-tbody-tr *ngFor="let data of yearData">
                              <td nz-td>{{data.partyName}}</td>
                              <td nz-td>{{data.elevatorNum}}</td>
                              <td nz-td>{{data.elevatorAddr}}</td>
                              <td nz-td>{{data.elevatorType}}</td>
                              <td nz-td>{{data.maintenanceUserName}}</td>
                              <td nz-td>{{data.maintenanceStartDate | timeTrans}}</td>
                              <td nz-td>{{data.maintenanceEndDate | timeTrans}}</td>
                              <td nz-td>
                                <span>
                                  <button nz-button [nzSize]="'small'" [nzType]="'primary'" (click)="export(data)">导出</button>
                                </span>
                              </td>
                            </tr>
                          </tbody>
                        </nz-table>
                      </ng-template>
                    </nz-card>
                  </div>
                </div>
              </div>
            </nz-tab>
          </nz-tabset>
        </div>
      </div>
    </div>
  </div>
  <div *ngIf="showNI" style="margin:1%">
    <div class="gutter-example">
      <div nz-row [nzGutter]="8">
        <div nz-col *ngIf="sysUser.userState==1" class="gutter-row" [nzSpan]="12">
          <nz-card style="width:100%;min-height:250px;">
            <ng-template #title>
              <i class="anticon anticon-notification noticeI"></i>消息通知

            </ng-template>
            <ng-template #extra>
              <a (click)="toNoticePage()">更多
                <i class="anticon anticon-right"></i>
              </a>

            </ng-template>
            <ng-template #body>
              <p *ngIf="!noticlist || noticlist.length==0">暂无数据</p>
              <div class="msgListNo" *ngFor="let notice of noticlist">
                <div>
                  <h3>{{notice.title}}</h3>
                </div>
                <div>
                  <span>{{notice.content}}</span>
                  <span style="display: block;margin-bottom:4px;">{{notice.noticeTime | timeTrans}}</span>
                </div>
              </div>
            </ng-template>
          </nz-card>
        </div>
        <div nz-col class="gutter-row" [nzSpan]="12">
          <nz-card style="width:100%;min-height:250px;">
            <ng-template #title>
              <i class="anticon anticon-info-circle-o infoI"></i>资讯
            </ng-template>
            <ng-template #extra>
              <a (click)="toInformationPage()">更多
                <i class="anticon anticon-right"></i>
              </a>

            </ng-template>
            <ng-template #body>
              <p *ngIf="!infolist || infolist.length==0">暂无数据</p>
              <div class="msgList" (click)="showInfo(titless, contentss, footerss, info)" *ngFor="let info of infolist">
                <div>
                  <h3 title="{{info.title}}">{{info.title}}</h3>
                </div>
                <div class="createUserName" style="float: right">
                  <!-- <span>{{info.subTitle}}</span> -->
                  <span>{{info.createUserName}}</span>
                </div>
              </div>

            </ng-template>
          </nz-card>
        </div>

      </div>
    </div>
  </div>


  <div *ngIf="!showNI">
    <!-- <nz-tabset style="margin-top:4px;" [nzTabPosition]="'top'" (nzSelectedIndexChange)="selectChanged($event)"
    [nzType]="'card'">
    <nz-tab>
      <ng-template #nzTabHeading>
        辖区整体安全状况
      </ng-template>
      <superviser-safe partyId="{{partyId}}"></superviser-safe>
    </nz-tab>
    <nz-tab>
      <ng-template #nzTabHeading>
        下属单位信息
      </ng-template>
      <superviser-party *ngIf="tab1opend==1" partyId="{{partyId}}"></superviser-party>
    </nz-tab>
    <nz-tab>
      <ng-template #nzTabHeading>
        主体责任单位信息
      </ng-template>
      <superviser-liability *ngIf="tab2opend==2" partyId="{{partyId}}"></superviser-liability>
    </nz-tab>
    <nz-tab>
      <ng-template #nzTabHeading>
        设备信息
      </ng-template>
      <superviser-ele *ngIf="tab3opend==3" partyId="{{partyId}}"></superviser-ele>
    </nz-tab>
    <nz-tab>
      <ng-template #nzTabHeading>
        检验机构信息
      </ng-template>
      <superviser-check *ngIf="tab4opend==4" partyId="{{partyId}}"></superviser-check>
    </nz-tab>
  </nz-tabset> -->

    <elevator-secure-state></elevator-secure-state>
  </div>


  <!-- 完善信息 -->
  <nz-modal [nzVisible]="isVisible" [nzTitle]="'完善信息提醒'" [nzContent]="modalContent" [nzClosable]="true" (nzOnOk)="handleOk($event)"
    (nzOnCancel)="handleOk($event)">
    <ng-template #modalContent>
     <nz-spin [nzTip]="'正在导入请等待...'" [nzSpinning]="nzSpinning1">
      <div *ngIf="userVisible">
        导入用户信息：
        <nz-upload nzAction="{{config.IP+config.API.uploadUser}}"  [nzBeforeUpload]="beforeUpload" [nzData]="upLoadParam" (nzChange)="uploadChage($event,'user')"
          [nzShowUploadList]="false">
          <button nz-button>
            <i class="anticon anticon-upload"></i>
            <span>用户导入模版</span>
          </button>
        </nz-upload>
        <a (click)="download('/information/user.xlsx','用户导入模板.xlsx')">用户模板下载</a>
      </div>
      <div *ngIf="partyVisible" style="margin-top: 10px">导入单位信息:
        <nz-upload nzAction="{{config.IP+config.API.uploadParty}}" [nzData]="upLoadParam"  [nzBeforeUpload]="beforeUpload" (nzChange)="uploadChage($event,'party')"
          [nzShowUploadList]="false">
          <button nz-button>
            <i class="anticon anticon-upload"></i>
            <span>机构导入模版</span>
          </button>
        </nz-upload>
        <a (click)="download('/information/party.xlsx','机构导入模板.xlsx')">机构模板下载</a>
      </div>
      <div style="margin-top: 10px">
        <a *ngIf="partyContractVisible" routerLink="/home/contract">合同信息完善</a>
      </div>
      <div *ngIf="elevatorVisible" style="margin-top: 10px">电梯台账信息完善:
        <!--<nz-upload nzAction="{{config.IP+config.API.importElevator}}" [nzData]="upLoadParam"  [nzBeforeUpload]="beforeUpload" (nzChange)="uploadChage($event,'elevator')"
          [nzShowUploadList]="false">-->

          <nz-upload nzAction="{{config.IP+config.API.uploadElevators}}" [nzData]="upLoadParam"  [nzBeforeUpload]="beforeUpload" (nzChange)="uploadChage($event,'elevator')"
                     [nzShowUploadList]="false">
          <button nz-button>
            <i class="anticon anticon-upload"></i>
            <span>台账导入</span>
          </button>
        </nz-upload>
        <a (click)="download('/information/elevator.xlsx','电梯台账模板.xlsx')">台账模板下载</a>
        <p style="margin-top:20px;color:red;font-weight:700;">建议每次最多导入50条，否则等待时间会过长。在导入期间请不要关闭窗口！</p>
      </div>
      </nz-spin>
    </ng-template>
  </nz-modal>

  <ng-template #titless>
    <span>详情</span>
  </ng-template>
  <ng-template #contentss>
    <information-modify [inValue]="inContent" (outPut)="addOutPut($event)"></information-modify>
  </ng-template>
  <ng-template #footerss>
    <div>
    </div>
  </ng-template>

</div>
